<template>
    <div class="newsinfo">
       <h3 class="title">{{info.title}}</h3>
       <p class="subtitle">
           <span>发表时间：{{info.add_time | dateFormat()}}</span>
           <span>点击：{{info.click}}</span>
       </p>
       <hr>
       <div class="content" v-html="info.content"></div>
       
       <!--评论区-->
       <comment></comment>
    </div>
</template>

<script>
import comment from '../subcomponents/comment.vue'
export default {
    data(){
        return {
            id : this.$route.params.id,
            info:{}
        }
    },
    methods:{
        getNewsinfo(){
            this.$http.get('static/data.json').then( (response) => {
                this.info = response.body.data.newsList[this.id-1];
            })
        }
    },
    created(){
        this.getNewsinfo();
    },
    components:{
        comment,
    }
}
</script>
<style scoped>
.newsinfo{
    padding :0 4px;
   overflow: auto;
} 
.title{
    font-size:16px;
    text-align:center;
    margin:15px 0;
    color: darkslategray;
}
.subtitle{
    font-size: 13px;
    color:#226aff;
    display: flex;
    justify-content:space-between;
}
.content{
    padding:10px
}
</style>